"use client";
import { useTranslations } from "next-intl";
import { useState, useRef, useEffect } from "react";
import { useRouter } from "next/navigation";
import Layout from "@/components/Layout";
// import Chart from "@/components/Chart";
import Chart from "./components/Chart";
import CountDown from "./components/CountDown";
import Image from "next/image";
import Sortable from "sortablejs";
import { ShopOutlined } from "@ant-design/icons";
import { Button, Input, Select, Space } from "antd";
const { Search } = Input;
import styles from "./index.module.less";

const nowDate = () => {
  const now = new Date();
  const options = { year: "numeric", month: "numeric", day: "numeric" };
  const formattedDate = now
    .toLocaleDateString("zh-CN", options)
    .replace(/\//g, "/");
  return formattedDate;
};

export default function Dashboard() {
  const t = useTranslations("index");
  const boardContainerRef = useRef<any>();
  const [price, setPrice] = useState(0.5);
  const [rate, setRate] = useState(5);
  const [publicCount, setPublicCount] = useState(5);
  const [holdCount, setHoldCount] = useState(5);
  const [increaseCount, setIncreaseCount] = useState(5);
  const [dayCount, setDayCount] = useState(5);
  useEffect(() => {}, []);

  return (
    <Layout curActive="/auction">
      <main className="flex items-center justify-center min-h-screen bg-gray-100">
        <div className={styles.auctionWrap}>
          {/* 左侧图片 */}
          <div className={styles.imgWrap}>
            <Image
              src="/nft.png" // 替换为你的图片路径
              alt="NFT Image"
              // layout="fill"
              objectFit="cover"
              className="rounded-l-lg"
              width={560}
              height={560}
            />
          </div>

          {/* 右侧信息 */}
          <div className={styles.rightWrap}>
            <Chart />

            <div className={styles.rightContent}>
              <div className={styles.rightItem}>
                <div className={styles.rightItemLeft}>
                  <ShopOutlined />
                  <div className={styles.rightItemLeftCenter}>
                    <div className={styles.rightItemCenterTitle}>
                      {t("First season")}
                    </div>
                    <div className={styles.rightItemCenterValue}>MONU 001</div>
                  </div>
                </div>

                <div className={styles.rightItemRight}>
                  <CountDown />
                </div>
              </div>

              <div className={styles.rightItem}>
                <div className={styles.rightItemLeft}>
                  <ShopOutlined />
                  <div className={styles.rightItemLeftCenter}>
                    <div className={styles.rightItemCenterTitle}>
                      {nowDate()}
                    </div>
                    <div className={styles.rightItemCenterValue}>
                      {t("Join count")}
                    </div>
                  </div>
                </div>

                <div className={styles.rightItemRight}>{t("Detail")}</div>
              </div>

              <div className={styles.rightItem}>
                <div className={styles.rightItemLeft}>
                  <ShopOutlined />
                  <div className={styles.rightItemLeftCenter}>
                    <div className={styles.rightItemCenterTitle}>
                      {t("Your price")}
                    </div>
                    <div className={styles.rightItemCenterValue}>
                      {t("Winning probability")}
                    </div>
                  </div>
                </div>

                <div className={styles.rightItemRight}>
                  {price} ETH / {rate}%
                </div>
              </div>
            </div>

            <div className={styles.btnWrap}>
              <Space.Compact
                style={{
                  width: "100%",
                }}
              >
                <Input />
                <Button type="primary">{t('Immediate bid')}</Button>
              </Space.Compact>
            </div>
           
          </div>
        </div>
        <div className={styles.descWrap}>
          <div className={styles.descItem}>
            <h2 className="text-xl font-bold">MONU {t('Public count')}</h2>
            <p className={styles.count}>{publicCount}</p>
            <p className={styles.subTitle}>自2024年7月1日</p>
          </div>
          <div className={styles.descItem}>
            <h2 className="text-xl font-bold">MONU 持有人</h2>
            <p className={styles.count}>{holdCount}</p>
            <p className={styles.subTitle}>本周增加{increaseCount}位</p>
          </div>
          <div className={styles.descItem}>
            <h2 className="text-xl font-bold">本季结算倒数</h2>
            <p className={styles.count}>{dayCount}天</p>
            <p className={styles.subTitle}>2024/7/1=2024/9/2</p>
          </div>
        </div>
      </main>
    </Layout>
  );
}